<template>
  <el-form class="login" ref="loginRef" :model="loginParam" :rules="loginRules">
    <h1 class="login-title">登录login</h1>
    <el-form-item prop="login">
      <el-input size="large" placeholder="请输入账号" prefix-icon="User" v-model="loginParam.login"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="large" placeholder="请输入密码" show-password prefix-icon="Lock"
                v-model="loginParam.password"></el-input>
    </el-form-item>
    <el-form-item prop="check">
      <el-checkbox v-model="loginParam.check">我已阅读并同意<a href="">《用户协议》</a></el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-button :loading="loading" type="primary" @click="login" class="login-button" size="large">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElNotification, FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user.ts";

let loading = ref<boolean>(false);
let $router = useRouter();
let $route = useRoute();
let userStore = useUserStore();

export interface LoginRequest {
  login: string;
  password: string;
  check: boolean;
}

const loginParam: LoginRequest = reactive({
  login: "",
  password: "",
  check: false
});

const loginRef = ref<any>();
const loginRules: FormRules = reactive({
  login: [{
    required: true, message: "请输入账号!", trigger: "blur"
  }],
  password: [{
    required: true, message: "请输入密码!", trigger: "blur"
  }],
  check: [{
    required: true, message: "请勾选!", trigger: "blur"
  }]
});
const login = async () => {
  await loginRef.value.validate();
  loading.value = true;
  try {
    await userStore.userLogin(loginParam);
    let redirect: any = $route.query.redirect;
    await $router.push({ path: redirect || "/home" });
    loading.value = false;
  } catch (err: any) {
    loading.value = false;
    ElNotification({
      type: "error",
      message: err.message
    });
  }
};
</script>
<style scoped>
.login {
  grid-column: 1;
  grid-row: 1;
  opacity: 1;
  transition: 1s ease-in-out;
  transition-delay: 0.3s;
  padding: 1% 25%;
  z-index: 1;
}

.login.model {
  opacity: 0;
  transition: 1s ease-in-out;
  z-index: 0;
}

.login-title {
  text-align: center;
  color: black;
  padding: 20px;
  font-size: 25px;
  font-weight: bold;
}

.login-button {
  width: 100%;
  font-size: 18px;
}
</style>